<template>
    <div>
       <h1>房号列表</h1>
       <div>
        房号名称:<input type="text" v-model="query.numbername"/>
        房号编号:<input type="text" v-model="query.numbernum"/>
        <input type="button" value="查询" class="btn btn-primary" @click="showw"/>
       </div>
       <table class="table table-bordered">
        <tbody>
            <tr>
                <td>id</td>
                <td>房型</td>
                <td>房号</td>
                <td>编号</td>
                <td>备注</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in data.list">
                <td>{{item.numberId}}</td>
                <td>{{item.typeName}}</td>
                <td>{{item.numberName}}</td>
                <td>{{item.numberNum}}</td>
                <td>{{item.desc}}</td>
                <td>
                    <input type="button" value="删除" class="btn btn-danger" @click="del(item.numberId)"/>
                    <input type="button" value="修改" class="btn btn-info" @click="update(item.numberId)"/>
                </td>
            </tr>
        </tbody>
       </table>
       <div>
        <span>每页显示{{ query.pageSize }}条/共{{ data.totalCount }}条</span>
        <span>当前第{{ query.pageIndex }}页/共{{ data.totalPage }}页</span>
        <input type="button" value="首页" @click="Gopage(1)"/>
        <input type="button" value="上一页" @click="Gopage(query.pageIndex-1)"/>
        <span v-for="item in data.totalPage" @click="Gopage(item)">{{ item }}</span>
        <input type="button" value="下一页" @click="Gopage(query.pageIndex+1)"/>
        <input type="button" value="尾页" @click="Gopage(data.totalPage)"/>
       </div>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,reactive,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
const router=useRouter();
const route=useRoute();

let query:any=reactive
({
    pageIndex:1,
    pageSize:3,
    numbernum:'',
    numbername:''
})

let data:any=reactive
({
    totalCount:'',
    totalPage:'',
    list:[]
})

onMounted(()=>{
    showlist();
})
const showw=()=>
{
    query.pageIndex=1;
    showlist();
}
//显示房号列表
const showlist=()=>
{
    axios
    ({
        url:'/api/House/ShowNumber',
        method:'get',
        params:query
    })
    .then(res=>{
        Object.assign(data,res.data);
    })
    .catch(err=>{

    })
}
//分页
const Gopage=(num:any)=>
{
  if(num<1)
  {
    query.pageIndex=1;
    return;
  }
  if(num>data.totalPage)
  {
    query.pageIndex=data.totalPage;
    return;
  }
  query.pageIndex=num;
  showlist();
}

//删除
const del=(id:any)=>
{
    let f=confirm("确认删除吗?")
    {
        if(f)
       {
           axios
           ({
               url:'/api/House/NumberDelete',
               method:'delete',
               params:{
                id:id
               }
           })
           .then(res=>{
            if(res.data>0)
             {
                alert("删除成功");
                showlist();
                return;
             }
             else
             {
                alert("删除失败");
                return;
             }
           })
           .catch(err=>{

           })
       }
    }
}
//修改
const update=(id:any)=>
{
    router.push
    ({
        path:'/numberUpdate',
        query:
        {
            id:id
        }
    })
}

</script>

<style scoped>
span
{
    margin: 0 10px;
}
input
{
    margin: 0 10px;
}
</style>